<script setup lang="tsx">
import { h } from 'vue'
import { ElButton } from 'element-plus'
import { propTypes } from '@sat/shared-utils'

defineProps({
  showSearch: propTypes.bool.def(true),
  showReset: propTypes.bool.def(true),
  showExpand: propTypes.bool.def(false),
  visible: propTypes.bool.def(true),
  searchLoading: propTypes.bool.def(false),
  resetLoading: propTypes.bool.def(false),
})

const emit = defineEmits(['search', 'reset', 'expand'])

function onSearch() {
  emit('search')
}

function onReset() {
  emit('reset')
}

function onExpand() {
  emit('expand')
}
</script>

<template>
  <ElButton
    v-if="showSearch"
    type="primary"
    :loading="searchLoading"
    :icon="h('i', { class: 'ep:search' })"
    @click="onSearch"
  >
    查询
  </ElButton>
  <ElButton
    v-if="showReset"
    :loading="resetLoading"
    :icon="h('i', { class: 'ep:refresh-right' })"
    @click="onReset"
  >
    重置
  </ElButton>
  <ElButton
    v-if="showExpand"
    :icon="h('i', { class: visible ? 'ep:arrow-up' : 'ep:arrow-down' })"
    text
    @click="onExpand"
  >
    {{ visible ? '收起' : '展开' }}
  </ElButton>
</template>
